<template>
  <!-- <div>woker</div>
  <button @click="change">点击</button> -->
  <!-- <table>
    <thead>
      <td>
        <input type="checkbox" @change="chooseAll" />
        全选
      </td>
      <td>名字</td>
      <td>年龄</td>
      <td>状态</td>
      <td>操作</td>
    </thead>
    <tbody>
      <tr v-for="(item, index) in dateArr" :key="item.id">
        <td>
          <input type="checkbox" :checked="checkList.indexOf(item.id) !== -1" />
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table> -->
  <div>{{ $t('userName') }}</div>
  <div id="app">
    <h1>嵌套组件示例</h1>
    <tree :tree-data="Data.treeList" />
  </div>
</template>

<script setup>
  import tree from './components/Tree.vue'
  import { treeData } from './test.js'
  import { reactive, ref } from 'vue'
  let Data = reactive({
    treeList: treeData
  })

  // for (var i = 0; i < arr.length - 1; i++) {
  //   // console.log(arr[i]) // 1 5 2 9 10
  //   for (var j = i + 1; j < arr.length; j++) {
  //     // console.log(arr[j]) // 5 2 9 10 8
  //     if (arr[i] > arr[j]) {
  //       // ts = arr[j]
  //       // arr[j] = arr[i]
  //       // arr[i] = ts
  //       min.push(arr[i])
  //       console.log(min)
  //     }
  //   }
  // }
  // console.log(arr) // [1, 2, 5, 8, 9, 10]
  // let checkList = reactive([])

  // let dateArr = reactive([])
  // let index = 0
  // function sliceRender() {
  //   // requestAnimationFrame
  //   requestAnimationFrame(() => {
  //     let target = index + 20
  //     for (; index < target; index++) {
  //       dateArr.push({
  //         id: index,
  //         name: '张三' + Math.floor(Math.random() * 20),
  //         status: Math.floor(Math.random() * 3),
  //         checked: false,
  //         age: Math.floor(Math.random() * 18)
  //       })
  //     }
  //     if (index < 1000) {
  //       sliceRender()
  //     }
  //   })
  // }
  // sliceRender()
  // function chooseAll() {
  //   let index = 0
  //   function sliceChecked() {
  //     requestAnimationFrame(() => {
  //       let target = index + 20
  //       for (; index < target; index++) {
  //         checkList.push(dateArr[index].id)
  //       }
  //       if (index < dateArr.length) {
  //         sliceChecked()
  //       }
  //     })
  //   }
  //   sliceChecked()
  // }
</script>

<style scoped lang="less">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
</style>
